<template>
  <div>
    <div class="container homecon">
      <h2 class="homeTitle homeTitleBtn">
        订单信息
        <ul class="conTab">
          <li
            v-for="(item, index) in tabList"
            :key="index"
            :class="activeIndex === index ? 'active' : ''"
            @click="handleClass(index)"
          >
            <el-badge
              class="item"
              :class="item.num >= 10 ? 'badgeW' : ''"
              :value="item.num > 99 ? '99+' : item.num"
              :hidden="!([2, 3].includes(item.value) && item.num)"
              >{{ item.label }}</el-badge
            >
          </li>
        </ul>
      </h2>
      <div class="">
        <div v-if="orderData.length > 0">
          <el-table
            :data="orderData"
            stripe
            class="tableBox"
            style="width: 100%"
            @row-click="handleTable"
          >
            <el-table-column prop="number" label="订单号"> </el-table-column>
            <el-table-column label="订单酒品">
              <template slot-scope="scope">
                <div class="ellipsisHidden">
                  <el-popover
                    placement="top-start"
                    title=""
                    width="200"
                    trigger="hover"
                    :content="scope.row.orderWines"
                  >
                    <span slot="reference">{{ scope.row.orderWines }}</span>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="地址"
              :class-name="dialogOrderStatus === 2 ? 'address' : ''"
            >
              <template slot-scope="scope">
                <div class="ellipsisHidden">
                  <el-popover
                    placement="top-start"
                    title=""
                    width="200"
                    trigger="hover"
                    :content="scope.row.address"
                  >
                    <span slot="reference">{{ scope.row.address }}</span>
                  </el-popover>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="estimatedDeliveryTime"
              label="预计送达时间"
              sortable
              class-name="orderTime"
              min-width="130"
            >
            </el-table-column>
            <el-table-column prop="amount" label="实收金额"> </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <div class="ellipsisHidden">
                  <el-popover
                    placement="top-start"
                    title=""
                    width="200"
                    trigger="hover"
                    :content="scope.row.remark"
                  >
                    <span slot="reference">{{ scope.row.remark }}</span>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              :class-name="dialogOrderStatus === 0 ? 'operate' : 'otherOperate'"
              :min-width="
                [2, 3].includes(dialogOrderStatus)
                  ? 130
                  : [0].includes(dialogOrderStatus)
                  ? 140
                  : 'auto'
              "
            >
              <template slot-scope="{ row }">
                <!-- <el-divider direction="vertical" /> -->
                <div class="before">
                  <el-button
                    v-if="row.status === 2"
                    type="text"
                    class="blueBug"
                    @click="
                      orderAccept(row, $event), (isTableOperateBtn = true)
                    "
                  >
                    接单
                  </el-button>
                  <el-button
                    v-if="row.status === 3"
                    type="text"
                    class="blueBug"
                    @click="cancelOrDeliveryOrComplete(3, row.id, $event)"
                  >
                    派送
                  </el-button>
                </div>
                <div class="middle">
                  <el-button
                    v-if="row.status === 2"
                    type="text"
                    class="delBut"
                    @click="
                      orderReject(row, $event), (isTableOperateBtn = true)
                    "
                  >
                    拒单
                  </el-button>
                  <el-button
                    v-if="[1, 3, 4, 5].includes(row.status)"
                    type="text"
                    class="delBut"
                    @click="cancelOrder(row, $event)"
                  >
                    取消
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Empty v-else :is-search="isSearch" />
        <el-pagination
          v-if="counts > 10"
          class="pageList"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 查看弹框部分 -->
    <el-dialog
      title="订单信息"
      :visible.sync="dialogVisible"
      width="53%"
      :before-close="handleClose"
      class="order-dialog"
    >
      <div style="height: 100%">
        <div class="order-top">
          <div>
            <div style="display: inline-block">
              <label style="font-size: 16px">订单号：</label>
              <div class="order-num">
                {{ diaForm.number }}
              </div>
            </div>
            <div
              style="display: inline-block"
              class="order-status"
              :class="{ status3: [3, 4].includes(dialogOrderStatus) }"
            >
              {{
                orderList.filter((item) => item.value === dialogOrderStatus)[0]
                  .label
              }}
            </div>
          </div>
          <p><label>下单时间：</label>{{ diaForm.orderTime }}</p>
        </div>

        <div class="order-middle">
          <div class="user-info">
            <div class="user-info-box">
              <div class="user-name">
                <label>用户名：</label>
                <span>{{ diaForm.consignee }}</span>
              </div>
              <div class="user-phone">
                <label>手机号：</label>
                <span>{{ diaForm.phone }}</span>
              </div>
              <div
                v-if="[2, 3, 4, 5].includes(dialogOrderStatus)"
                class="user-getTime"
              >
                <label>{{
                  dialogOrderStatus === 5 ? '送达时间：' : '预计送达时间：'
                }}</label>
                <span>{{
                  dialogOrderStatus === 5
                    ? diaForm.deliveryTime
                    : diaForm.estimatedDeliveryTime
                }}</span>
              </div>
              <div class="user-address">
                <label>地址：</label>
                <span>{{ diaForm.address }}</span>
              </div>
            </div>
            <div
              class="user-remark"
              :class="{ orderCancel: dialogOrderStatus === 6 }"
            >
              <div>{{ dialogOrderStatus === 6 ? '取消原因' : '备注' }}</div>
              <span>{{
                dialogOrderStatus === 6
                  ? diaForm.cancelReason || diaForm.rejectionReason
                  : diaForm.remark
              }}</span>
            </div>
          </div>

          <div class="wine-info">
            <div class="wine-label">酒品</div>
            <div class="wine-list">
              <div
                v-for="(item, index) in diaForm.orderDetailList"
                :key="index"
                class="wine-item"
              >
                <span class="wine-name">{{ item.name }}</span>
                <span class="wine-num">x{{ item.number }}</span>
                <span class="wine-price"
                  >￥{{ item.amount ? item.amount.toFixed(2) : '' }}</span
                >
              </div>
            </div>
            <div class="wine-all-amount">
              <label>酒品小计</label>
              <span
                >￥{{
                  (diaForm.amount - 6 - diaForm.packAmount).toFixed(2)
                }}</span
              >
            </div>
          </div>
        </div>

        <div class="order-bottom">
          <div class="amount-info">
            <div class="amount-label">费用</div>
            <div class="amount-list">
              <div class="wine-amount">
                <span class="amount-name">酒品小计：</span>
                <span class="amount-price"
                  >￥{{
                    ((diaForm.amount - 6 - diaForm.packAmount).toFixed(2) *
                      100) /
                    100
                  }}</span
                >
              </div>
              <div class="send-amount">
                <span class="amount-name">派送费：</span>
                <span class="amount-price">￥{{ 6 }}</span>
              </div>
              <div class="package-amount">
                <span class="amount-name">打包费：</span>
                <span class="amount-price"
                  >￥{{
                    diaForm.packAmount
                      ? (diaForm.packAmount.toFixed(2) * 100) / 100
                      : ''
                  }}</span
                >
              </div>
              <div class="all-amount">
                <span class="amount-name">合计：</span>
                <span class="amount-price"
                  >￥{{
                    diaForm.amount
                      ? (diaForm.amount.toFixed(2) * 100) / 100
                      : ''
                  }}</span
                >
              </div>
              <div class="pay-type">
                <span class="pay-name">支付渠道：</span>
                <span class="pay-value">{{
                  diaForm.payMethod === 1 ? '微信支付' : '支付宝支付'
                }}</span>
              </div>
              <div class="pay-time">
                <span class="pay-name">支付时间：</span>
                <span class="pay-value">{{ diaForm.checkoutTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span v-if="dialogOrderStatus !== 6" slot="footer" class="dialog-footer">
        <el-checkbox
          v-if="dialogOrderStatus === 2 && status === 2"
          v-model="isAutoNext"
          >处理完自动跳转下一条</el-checkbox
        >
        <el-button
          v-if="dialogOrderStatus === 2"
          @click="orderReject(row, $event), (isTableOperateBtn = false)"
          >拒 单</el-button
        >
        <el-button
          v-if="dialogOrderStatus === 2"
          type="primary"
          @click="orderAccept(row, $event), (isTableOperateBtn = false)"
          >接 单</el-button
        >

        <el-button
          v-if="[1, 3, 4, 5].includes(dialogOrderStatus)"
          @click="dialogVisible = false"
          >返 回</el-button
        >
        <el-button
          v-if="dialogOrderStatus === 3"
          type="primary"
          @click="cancelOrDeliveryOrComplete(3, row.id, $event)"
          >派 送</el-button
        >
        <el-button
          v-if="dialogOrderStatus === 4"
          type="primary"
          @click="cancelOrDeliveryOrComplete(4, row.id, $event)"
          >完 成</el-button
        >
        <el-button
          v-if="[1].includes(dialogOrderStatus)"
          type="primary"
          @click="cancelOrder(row, $event)"
          >取消订单</el-button
        >
      </span>
    </el-dialog>
    <!-- end -->
    <!-- 拒单，取消弹窗 -->
    <el-dialog
      :title="cancelDialogTitle + '原因'"
      :visible.sync="cancelDialogVisible"
      width="42%"
      :before-close="() => ((cancelDialogVisible = false), (cancelReason = ''))"
      class="cancelDialog"
    >
      <el-form label-width="90px">
        <el-form-item :label="cancelDialogTitle + '原因：'">
          <el-select
            v-model="cancelReason"
            :placeholder="'请选择' + cancelDialogTitle + '原因'"
          >
            <el-option
              v-for="(item, index) in cancelDialogTitle === '取消'
                ? cancelrReasonList
                : cancelOrderReasonList"
              :key="index"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="cancelReason === '自定义原因'" label="原因：">
          <el-input
            v-model.trim="remark"
            type="textarea"
            :placeholder="'请填写您' + cancelDialogTitle + '的原因（限20字内）'"
            maxlength="20"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click=";(cancelDialogVisible = false), (cancelReason = '')"
          >取 消</el-button
        >
        <el-button type="primary" @click="confirmCancel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- end -->
  </div>
</template>

<script >
import Empty from '@/components/Empty.vue'
import request from "@/utils/request";

export default {
  name: 'OrderList',
  components: {
    Empty,
  },
  props: {
    orderStatics: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      orderId: '', // 订单号
      dialogOrderStatus: 0, // 弹窗所需订单状态，用于详情展示字段
      activeIndex: 0,

      dialogVisible: false, // 详情弹窗
      cancelDialogVisible: false, // 取消，拒单弹窗
      cancelDialogTitle: '', // 取消，拒绝弹窗标题
      cancelReason: '',
      remark: '', // 自定义原因
      diaForm: [],
      row: {},
      isAutoNext: true,
      isSearch: false,
      counts: 0,
      page: 1,
      pageSize: 10,
      status: 2,
      orderData: [],
      isTableOperateBtn: true,

      cancelOrderReasonList: [
        {
          value: 1,
          label: '订单量较多，暂时无法接单',
        },
        {
          value: 2,
          label: '酒品已销售完，暂时无法接单',
        },
        {
          value: 3,
          label: '餐厅已打烊，暂时无法接单',
        },
        {
          value: 0,
          label: '自定义原因',
        },
      ],

      cancelrReasonList: [
        {
          value: 1,
          label: '订单量较多，暂时无法接单',
        },
        {
          value: 2,
          label: '酒品已销售完，暂时无法接单',
        },
        {
          value: 3,
          label: '骑手不足无法配送',
        },
        {
          value: 4,
          label: '客户电话取消',
        },
        {
          value: 0,
          label: '自定义原因',
        },
      ],

      orderList: [
        {
          label: '全部订单',
          value: 0,
        },
        {
          label: '待付款',
          value: 1,
        },
        {
          label: '待接单',
          value: 2,
        },
        {
          label: '待派送',
          value: 3,
        },
        {
          label: '派送中',
          value: 4,
        },
        {
          label: '已完成',
          value: 5,
        },
        {
          label: '已取消',
          value: 6,
        },
      ],
    }
  },

  computed: {
    tabList() {
      return [
        {
          label: '待接单',
          value: 2,
          num: this.orderStatics.toBeConfirmed,
        },
        {
          label: '待派送',
          value: 3,
          num: this.orderStatics.confirmed,
        },
      ]
    },
  },

  created() {
    this.getOrderListData(this.status)
  },

  methods: {
    async getOrderListData(status) {
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        status,
      }
      const data = await  request.get('admin/order/conditionSearch',{ params })
      this.orderData = data.data.records
      this.counts = data.data.total
      this.$emit('getOrderListBy3Status')

    },

    // 接单
    orderAccept(row, event) {
      event.stopPropagation()
      this.orderId = row.id
      this.dialogOrderStatus = row.status
      request.put('admin/order/confirm', { id: this.orderId })
          .then((res) => {
            if (res.code === 1) {
              this.$message.success('操作成功')
              this.orderId = ''
              // this.dialogOrderStatus = 0
              this.dialogVisible = false
              this.getOrderListData(this.status)
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch((err) => {
            this.$message.error('请求出错了：' + err.message)
          })
    },

    // 打开取消订单弹窗
    cancelOrder(row, event) {
      event.stopPropagation()
      this.cancelDialogVisible = true
      this.orderId = row.id
      this.dialogOrderStatus = row.status
      this.cancelDialogTitle = '取消'
      this.dialogVisible = false
      this.cancelReason = ''
    },

    // 打开拒单弹窗
    orderReject(row, event) {
      event.stopPropagation()
      this.cancelDialogVisible = true
      this.orderId = row.id
      this.dialogOrderStatus = row.status
      this.cancelDialogTitle = '拒绝'
      this.dialogVisible = false
      this.cancelReason = ''
    },

    //确认取消或拒绝订单并填写原因
    confirmCancel(type) {
      if (!this.cancelReason) {
        return this.$message.error(`请选择${this.cancelDialogTitle}原因`);
      } else if (
          this.cancelReason === '自定义原因' &&
          !this.remark
      ) {
        return this.$message.error(`请输入${this.cancelDialogTitle}原因`);
      }

      if(this.cancelDialogTitle === '取消'){
        request.put('admin/order/cancel',{
          id: this.orderId,
          [this.cancelDialogTitle === '取消' ? 'cancelReason' : 'rejectionReason']:
              this.cancelReason === '自定义原因'
                  ? this.remark
                  : this.cancelReason,
        }).then((res) => {
          if (res.code === 1) {
            this.$message.success('操作成功');
            this.cancelDialogVisible = false;
            this.orderId = '';
            // this.dialogOrderStatus = 0
            this.getOrderListData(this.orderStatus);
          } else {
            this.$message.error(res.msg);
          }
        })
            .catch((err) => {
              this.$message.error('请求出错了：' + err.message);
            });
      }else{
        request.put('admin/order/rejection',{
          id: this.orderId,
          [this.cancelDialogTitle === '取消' ? 'cancelReason' : 'rejectionReason']:
              this.cancelReason === '自定义原因'
                  ? this.remark
                  : this.cancelReason,
        }).then((res) => {
          if (res.code === 1) {
            this.$message.success('操作成功');
            this.cancelDialogVisible = false;
            this.orderId = '';
            // this.dialogOrderStatus = 0
            this.getOrderListData(this.orderStatus);
          } else {
            this.$message.error(res.msg);
          }
        })
            .catch((err) => {
              this.$message.error('请求出错了：' + err.message);
            });
      }

    },

    //派送，完成
    cancelOrDeliveryOrComplete(status, id) {
      const params = {
        status,
        id,
      };
      if (status === 3) {
        request.put(`admin/order/delivery/${params.id}`)
            .then((res) => {
              if (res.code === 1) {
                this.$message.success('操作成功');
                this.orderId = '';
                // this.dialogOrderStatus = 0
                this.dialogVisible = false;
                this.getOrderListData(status);
              } else {
                this.$message.error(res.msg);
              }
            }).catch((err) => {
          this.$message.error('请求出错了：' + err.message);
        });
      } else {
        request.put(`admin/order/complete/${params.id}`)
            .then((res) => {
              if (res.code === 1) {
                this.$message.success('操作成功');
                this.orderId = '';
                // this.dialogOrderStatus = 0
                this.dialogVisible = false;
                this.getOrderListData(status);
              } else {
                this.$message.error(res.msg);
              }
            }).catch((err) => {
          this.$message.error('请求出错了：' + err.message);
        });
      }
    },



    // 关闭弹层
    handleClose() {
      this.dialogVisible = false
    },

    // tab切换
    handleClass(index) {
      this.activeIndex = index
      if (index === 0) {
        this.status = 2
        this.getOrderListData(2)
      } else {
        this.status = 3
        this.getOrderListData(3)
      }
    },

    // 触发table某一行
    handleTable(row, column, event) {
      event.stopPropagation()
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getOrderListData(this.status)
    },

    handleCurrentChange(val) {
      this.page = val
      this.getOrderListData(this.status)
    },
  },
}
</script>
<style >
.dashboard-container.home .homecon {
  margin-bottom: 0;
}
.order-top {

  border-bottom: 1px solid #e7e6e6;
  padding-bottom: 26px;
  padding-left: 22px;
  padding-right: 22px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  .order-status {
    width: 57.25px;
    height: 27px;
    background: #333333;
    border-radius: 13.5px;
    color: white;
    margin-left: 19px;
    text-align: center;
    line-height: 27px;
  }
  .status3 {
    background: #f56c6c;
  }
  p {
    color: #333;
    label {
      color: #666;
    }
  }
  .order-num {
    font-size: 16px;
    color: #2a2929;
    font-weight: bold;
    display: inline-block;
  }
}

.order-middle {
  .user-info {
    min-height: 140px;
    background: #fbfbfa;
    margin-top: 23px;

    padding: 20px 43px;
    color: #333;
    .user-info-box {
      min-height: 55px;
      display: flex;
      flex-wrap: wrap;
      .user-name {
        flex: 67%;
      }
      .user-phone {
        flex: 33%;
      }
      .user-getTime {
        margin-top: 14px;
        flex: 80%;
        label {
          margin-right: 3px;
        }
      }
      label {
        margin-right: 17px;
        color: #666;
      }

      .user-address {
        margin-top: 14px;
        flex: 80%;
        label {
          margin-right: 30px;
        }
      }
    }
    .user-remark {
      height: 43px;
      line-height: 43px;
      background: #fffbf0;
      border: 1px solid #fbe396;
      border-radius: 4px;
      margin-top: 10px;
      padding: 6px;
      display: flex;
      align-items: center;
      div {
        display: inline-block;
        min-width: 53px;
        height: 32px;
        background: #fbe396;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        color: #333;
        margin-right: 30px;
      }
      span {
        line-height: 1.15;
      }
    }
    .orderCancel {
      background: #ffffff;
      border: 1px solid #b6b6b6;

      div {
        padding: 0 10px;
        background-color: #e5e4e4;
      }
      span {
        color: #f56c6c;
      }
    }
  }
  .wine-info {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 40px;
    border-bottom: 1px solid #e7e6e6;
    .wine-label {
      color: #666;
    }
    .wine-list {
      flex: 80%;
      display: flex;
      flex-wrap: wrap;
      .wine-item {
        flex: 50%;
        margin-bottom: 14px;
        color: #333;
        .wine-num {
          margin-right: 51px;
        }
      }
    }
    .wine-label {
      margin-right: 65px;
    }
    .wine-all-amount {
      flex: 1;
      padding-left: 92px;
      margin-top: 10px;
      label {
        color: #333333;
        font-weight: bold;
        margin-right: 5px;
      }
      span {
        color: #f56c6c;
      }
    }
  }
}

</style>
<style >

.dashboard-container td.operate .cell {
  .before,
  .middle,
  .after {
    height: 39px;
    width: 48px;
  }
}

.dashboard-container td.operate .cell,
.dashboard-container td.otherOperate .cell {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
</style>
